<template>
  <div>
    <el-aside :width="isCollapse ? '110px' : '200px'">
      <div class="toggle-button" @click="toggleCollapse">|||</div>
      <el-menu
          background-color="#333744" text-color="#fff"
          active-text-color="#409EFF"
          unique-opened
          router
          :collapse="isCollapse"
          :default-active="activePath">
        <div v-for="menu in activeMenu">
          <!--如果没有子菜单-->
          <el-menu-item v-if="!menu.hasChild" :key="menu.menuId" :index="menu.url"
                        @click="saveNavState( menu.url)">
            <i :class="menu.icon"></i>
            <span>{{ menu.menuName }}</span>
          </el-menu-item>

          <!--如果有子菜单-->
          <el-submenu v-else :key="menu.menuId" :index="menu.menuName">
            <template slot="title">
              <i :class="menu.icon"></i>
              <span>{{ menu.menuName }}</span>
            </template>
            <!--<el-menu-item-group>-->
            <el-menu-item v-for="chmenu in menu.menus"
                          :key="chmenu.menuId"
                          :index="chmenu.url"
                          @click="saveNavState(chmenu.url)">
              <i :class="chmenu.icon"></i>
              <span>{{ chmenu.menuName }}</span>
            </el-menu-item>

          </el-submenu>
        </div>

      </el-menu>
    </el-aside>
  </div>

</template>

<script>
export default {
  data() {
    return {
      isCollapse: false,
      activePath: '',
      // activeMenu: '',
      userMenus: [
        {
          menuId: '1',
          icon: 'el-icon-takeaway-box',
          menuName: '附近商家',
          url: '/restaurants',
          hasChild: false,
          menus: [],

        },
        {
          menuId: '2',
          icon: 'el-icon-location',
          menuName: '收货地址',
          url: '/address',
          hasChild: false,
          menus: [],
        },
        {
          menuId: '5',
          icon: 'el-icon-s-order',
          menuName: '订单',
          url: '/order',
          hasChild: false,
          menus: [],
        },
        {
          menuId: '3',
          icon: 'el-icon-s-home',
          menuName: '我的',
          url: '3',
          hasChild: true,
          menus: [
            {
              menuId: '3-1',
              icon: 'el-icon-star-on',
              menuName: '收藏店铺',
              url: '/collection',
              hasChild: false,
              menus: [],
            },
            {
              menuId: '3-2',
              icon: 'el-icon-tickets',
              menuName: '个人信息',
              url: '/reset',
              hasChild: false,
              menus: [],
            },
          ],

        },
        {
          menuId: '4',
          icon: 'el-icon-more',
          menuName: '更多服务',
          url: '4',
          hasChild: true,
          menus: [
            {
              menuId: '4-1',
              icon: 'el-icon-menu',
              menuName: '商家入盟',
              url: '/registerRest',
              hasChild: false,
              menus: [],
            },
          ],

        },
      ],
      sellerMenus: [
        {
          menuId: '1',
          icon: 'el-icon-s-shop',
          menuName: '我的店铺',
          url: '/myRestaurant',
          hasChild: false,
          menus: [],
        },
        {
          menuId: '2',
          icon: 'el-icon-eleme',
          menuName: '餐品管理',
          url: '',
          hasChild: true,
          menus: [
            {
              menuId: '2-1',
              icon: 'el-icon-menu',
              menuName: '类别管理',
              url: '/cateManage',
              hasChild: false,
              menus: [],
            },
            {
              menuId: '2-2',
              icon: 'el-icon-menu',
              menuName: '菜品管理',
              url: '/foodManage',
              hasChild: false,
              menus: [],
            },

          ],
        },
        {
          menuId: '3',
          icon: 'el-icon-document',
          menuName: '订单管理',
          url: '3',
          hasChild: true,
          menus: [
            {
              menuId: '3-1',
              icon: 'el-icon-tickets',
              menuName: '新的订单',
              url: '/latestOrder',
              hasChild: false,
              menus: [],
            },
            {
              menuId: '3-2',
              icon: 'el-icon-tickets',
              menuName: '历史订单',
              url: '/completeOrder',
              hasChild: false,
              menus: [],
            },
            {
              menuId: '3-3',
              icon: 'el-icon-tickets',
              menuName: '订单评价',
              url: '/comments',
              hasChild: false,
              menus: [],
            },
          ],

        },
      ],
    };
  },
  created() {
    this.activePath = window.sessionStorage.getItem('activePath')
  },
  computed: {
    activeMenu() {
      if (this.$store.getters.userType === 1) {
        return this.userMenus;
      } else if (this.$store.getters.userType === 2) {
        return this.sellerMenus;
      }
      return null;
    }
  },
  methods: {
    handleClose(key, keyPath) {
    },
    toggleCollapse() {
      this.isCollapse = !this.isCollapse
    },
    // 保存链接的激活状态(高亮显示)
    saveNavState(activePath) {
      window.sessionStorage.setItem('activePath', activePath)
      this.activePath = activePath
    }
  },

}
</script>

<style lang="less" scoped>
.el-aside {
  background-color: #333744;
  height: 100%;

  .toggle-button {
    background-color: #4a5064;
    font-size: 10px;
    line-height: 24px;
    color: #fff;
    text-align: center;
    letter-spacing: 0.2em;
    cursor: pointer;
  }

  .el-menu {
    border-right: none;
  }
}
</style>
